import React, { useState } from "react";
import "./tag.scss";
import Close from "../icons/close";

/**
 * @param type Tag 的类型
 * @param closeable 是否可关闭
 * @param hit 是否有边框描边
 * @param color 背景色
 * @param size Tag 的尺寸
 * @param effect Tag 的主题
 * @param round Tag 是否为圆形
 */
interface Props {
    type?: 'primary' | 'success' | 'info' | 'warning' | 'error',
    closable?: boolean,
    hit?: boolean,
    color?: string,
    size?: 'large' | 'default' | 'small',
    effect?: 'dark' | 'light' | 'plain',
    round?: boolean,
    close?: () => void
    children?: React.ReactNode
}

const Tag = ({
    type = "primary",
    closable = false,
    hit = false,
    color,
    size = "default",
    effect = "light",
    round = false,
    close = () => {},
    children
}: Props) => {
    const [show, setShow] = useState<boolean>(true)

    const onClose = () => {
        setShow(false)
        close()
    }

    return (
        <>
            {
                show ? (
                    <div className={[
                        'pe-tag',
                        `pe-tag-${size}`,
                        `pe-tag-${type}`,
                        `pe-tag-${effect}`,
                        hit ? 'pe-tag-hit' : '',
                        round ? 'pe-tag-round' : ''
                    ].join(" ").trim()} style={{ color }}>
                        <span className="pe-tag-text">
                            {children}
                        </span>
                        {
                            closable ? (
                                <span className="pe-tag-close" onClick={onClose}>
                                    <Close />
                                </span>
                            ) : null
                        }
                    </div >
                ) : null
            }
        </>
    )
}

export default Tag